Create a production-ready Web Bluetooth application for a timezone-based clock system.

Core purpose:
- Allow user to select any location in the world
- Send correct UTC time + timezone offset to an ESP32-S3 over BLE

UI REQUIREMENTS:

1. World Time Interface
- Similar to mobile “World Clock” apps
- User can:
  - Search by city, country, or timezone
  - See matching results instantly (autocomplete dropdown)
  - Select one location

2. Full Timezone Support
- Use complete IANA timezone database
- Use JavaScript Intl API:
  Intl.supportedValuesOf("timeZone")
- Correctly handle:
  - DST (daylight saving)
  - fractional offsets (e.g., +5:30, +5:45)

3. 3D Globe Interface (IMPORTANT)
- Render an interactive 3D globe using a web library (Three.js or Globe.gl)
- Features:
  - Rotate globe with touch/mouse
  - Zoom in/out
  - Click on any location
  - Place a pin marker on selected location
  - Highlight selected timezone region
- When user clicks a point:
  - Detect nearest timezone
  - Select it automatically

4. Time Display
- Show:
  - Current UTC time
  - Local time of selected location
  - Timezone name (e.g., Asia/Kolkata)
- Update live every second

5. BLE Integration
- Use Web Bluetooth API
- Connect to ESP32 device named: "TimeSync"
- Service UUID: 12345678-1234-1234-1234-1234567890ab
- Characteristic UUID: abcd1234-5678-1234-5678-abcdef123456

6. Data Sent to ESP32
Send JSON:

{
  "utc": "YYYY-MM-DDTHH:MM:SS",
  "offset": seconds,
  "tz": "IANA timezone string"
}

7. Offset Calculation (IMPORTANT)
- Compute correct offset dynamically:
  Use:
  new Date().toLocaleString("en-US", { timeZone: selectedZone })
- Ensure DST correctness

8. UX Details
- Clean mobile-first UI
- Smooth animations for globe
- Highlight selected city
- Show connection status:
  - Not connected
  - Connected
  - Synced

9. Constraints
- Must work on mobile Chrome
- No backend (pure frontend)
- Lightweight but visually impressive

10. Output Required
Provide:
- Complete HTML file
- CSS styling
- JavaScript (modular and clean)
- Globe setup (Three.js or Globe.gl)
- BLE connection logic
- Timezone selection logic

Optional enhancements:
- Auto-detect user location
- Show multiple saved cities
- Dark mode UI

Keep code structured, readable, and production-quality.











⚠️ Reality check (important)

3D globe + timezone mapping requires:

either:
a timezone dataset (geojson)
or approximation mapping

If you want perfect accuracy, next step is:
👉 integrate timezone boundary data

If you want next upgrade

I can generate:

ready-made 3D globe working code
with 
click → timezone detection already done

Just say:
“give working globe code”